<template>
    <div class="logo-container">
        <div class="box">
            <div class="logo">
            <img :src="setLogo.logo" alt="">
        </div>
        <div :class="{'title':true,'fold':store.fold?true:false}">
            {{ setLogo.title }}
        </div>
        </div>
       
    </div>
</template>

<script setup lang='ts'>
import setLogo from '@/setLogo';
import { changeLayout } from "@/stores/modules/changeLayout/index.ts"
let store = changeLayout() 
</script>

<style lang="scss" scoped>
.fold{
    display: none !important;
}
.logo-container{
    width: 100%;
    height: 6vh;
  
    display: flex;
    justify-content: center;
}
.box{
    display: flex;
    width: 90%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.logo{
    width: 30%;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: end;
    min-width: 40px;
  
    img{
        width: 40px;
        height: 40px;
        min-width: 40px;  
    }

}
.title{
    margin-left: 7px;
    white-space: nowrap;
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
    transition: all .3s;
}
</style>